<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <router-link to="/home">首页</router-link>
        <router-link to="/qita/123">其他页1</router-link>
        <router-link to="/qita/456">其他页2</router-link>
        <router-view></router-view>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
    <script>

        let router = new VueRouter({
            routes : [
                {
                    path : "/home",
                    component : () => import("./home.js"),
                    beforeEnter: (to, from, next) => {
                        console.log("路由守卫");
                        next();
                    }
                },
                {
                    path : "/qita/:id",
                    component : () => Promise.resolve({
                        template : `
                            <h1>其他页</h1>
                        `,
                        beforeRouteEnter(to, from, next){
                            console.log(1);
                            next();
                        },
                        beforeRouteUpdate(to,from,next){
                            console.log(2);
                            next();
                        },
                        beforeRouteLeave (to, from, next) {
                            console.log(3);
                            next();
                        }
                    }),
                },
            ],
        });
        router.beforeEach((to, from, next) => {
            console.log("全局守卫");
            next();
        })
        let vm = new Vue({
            el : "#box",
            router,
        });
    </script>
</body>
</html>